<template>
  <div id="back_top" @click="backTop">
    <i class="el-icon-arrow-up"></i>
  </div>
</template>

<script>
export default {
  components: {
    
  },
  mounted() {
    // this.scrollFunction();
    // window.onscroll = this.scrollFunction();
    window.addEventListener("scroll",  this.scrollFunction , false)
  },
  data() {
    return {
      
    }
  },
  methods: {
    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    scrollFunction() {
        // console.log(121);
        // console.log("back_top", this.$route)
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("back_top").style.display = "block";
        } else {
            document.getElementById("back_top").style.display = "none";
        }
    },
 
    // 点击按钮，返回顶部
    backTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    },
  },
}
</script>

<style>
#back_top {
    display: none; /** 默认隐藏 */
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none;
    outline: none; 
    background-color: #969696; /* 设置背景颜色，你可以设置自己想要的颜色或图片 */
    color: white; /* 文本颜色 */
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px; /* 圆角 */
}
 
#back_top:hover {
    background-color: rgb(126, 126, 126); 
}
</style>